import { NODE_TYPE } from '@/constants/config';
import { NodeStatus } from '@/hooks/useGraph';
import { Node } from '@antv/x6';
import { register } from '@antv/x6-vue-shape';
import { DefineComponent, PropType } from 'vue';

export let defineComponentAndRegisterToGraph = defineComponent;

(defineComponentAndRegisterToGraph as any) = (config: any) => {
  return registerToGraph(defineComponent(config));
};

export const baseNodeProps = {
  nodeType: {
    type: String as PropType<keyof typeof NODE_TYPE>,
    default: ''
  },
  data: {
    type: Object as PropType<NodeStatus>,
    default: null
  },
  node: {
    type: Object as PropType<Node>,
    default: null
  },
  onMousedown: {
    type: Function,
    default: null
  },
  onClick: {
    type: Function,
    default: null
  },
  isFromNodeList: {
    type: Boolean,
    default: false
  }
};

export const registerToGraph = <T = DefineComponent>(vueComponent: T) => {
  if (!vueComponent) {
    return;
  }
  const shape = (vueComponent as any).name;
  if (!shape) {
    throw new Error('vueComponent.name is required');
  }
  register({
    shape,
    width: 180,
    height: 36,
    component: vueComponent,
    ports: {
      groups: {
        in: {
          position: 'left',
          attrs: {
            circle: {
              r: 4,
              magnet: true,
              stroke: '#C2C8D5',
              strokeWidth: 1,
              fill: '#fff'
            }
          }
        },
        out: {
          position: 'right',
          attrs: {
            circle: {
              r: 4,
              magnet: true,
              stroke: '#C2C8D5',
              strokeWidth: 1,
              fill: '#fff'
            }
          }
        }
      }
    }
  });

  return vueComponent;
};
